<template>
  <div class="add-task">
    <Solution v-show="step === 1" @choose="handleChoose" />
    <TaskForm v-show="step === 2" :solution="solution" @next="handleNext" @prev="handlePrev" />
    <TreeForm v-if="step === 3" :taskInfo="taskInfo" @prev="backStep" @reset="handleReset" />
  </div>
</template>

<script setup lang="ts">

import "@xc-components/xc-form/lib/style.css";
import "@xc-components/xc-table/lib/style.css";

import { onBeforeUnmount, ref, watch } from "vue";
import Solution from './components/SolutionList.vue';
import TaskForm from "./components/TaskForm.vue";
import TreeForm from "./components/TreeForm.vue";
import { cancelCreateTask } from "../api/task/index";
import type { CreateTaskParams, SolutionItem } from "../api/task/index.d";

defineOptions({
  name: "CreateTask",
  components: { Solution, TaskForm, TreeForm }
});
const step = ref(1);
const solution = ref<Partial<SolutionItem>>({});
const taskInfo = ref<Partial<CreateTaskParams>>({});
onBeforeUnmount(() => {
  cancelTask();
});

watch(() => step.value,
  () => {
    console.log("step", step);
  })

/**
 * @description: 取消创建任务
 * @return {*}
 */
const cancelTask = async () => {
  const taskId = taskInfo.value?.id || "";
  if (taskId) {
    await cancelCreateTask(undefined, { taskId });
  }
};
/**
 * @description: 选择方案
 * @param {*} row
 * @return {*}
 */
const handleChoose = (row: SolutionItem) => {
  solution.value = row;
  step.value = 2;
};

/**
 * @description: 下一步
 * @return {*}
 */
const handleNext = (data: CreateTaskParams) => {
  taskInfo.value = data;
  step.value = step.value + 1;
};

/**
 * @description: 上一步
 * @return {*}
 */
const handlePrev = () => {
  step.value = step.value - 1;
};
const backStep = () => {
  cancelTask();
  handlePrev();
};
const handleReset = () => {
  step.value = 1;
  taskInfo.value = {};
  solution.value = {};
};


import { useCreateTaskStore } from "../store/createTaskStore";
import { routerLinkTestView } from "../api/task/index";

const dataEvent = (data: any) => {
  console.log("子组件收到数据了", data);
}

defineExpose({
  dataEvent
})

// 2. 实例化组合式 store
const createTaskStore = useCreateTaskStore();

// 验证存储结果
console.log("存储后 Pinia 中的值111：", createTaskStore.sendCreateTaskCmd);

</script>

<style lang="scss" scoped>
.add-task {
  height: 100%;
}
</style>
